<template>
	<view>
		<view class="Wrapper">
			<view class="row j-end a-center">
				<view class="d-flex">
					<view class="Btn" @click="$pop.toHref()">购买套餐</view>
				</view>
			</view>
			<view class="foundation">
				<text class="size28 white">绿色积分</text>
				<text class="size46 white">{{ accountInfo.green_fen }}</text>
			</view>
		</view>

		<view class="list" v-for="(item, index) in pageData" :key="index">
			<view class="d-flex f-column">
				<text class="black size30 bold500">{{ item.remarks }}</text>
				<text class="color_33 size26 m-top10">{{ item.add_date }}</text>
			</view>
			<text class="privce">{{ item.number_text }}</text>
		</view>

		<view class="p-top100 p-bot100" v-if="!pageData.length">
			<u-empty mode="list" text="暂无相关内容"></u-empty>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			limit: 10,
			page: 1,
			accountInfo: '',
			pageData: [],
			getMore: true
		};
	},
	onLoad() {
		this.getAddGreenFenLog();
	},
	methods: {
		getAddGreenFenLog() {
			this.$http
				.post({
					url: '/cqzmqmH5Api/getAddGreenFenLog',
					data: {
						page: this.page,
						limit: this.limit
					}
				})
				.then((res) => {
					if (res.errcode != '100') return this.$Toast(res.msg);
					this.accountInfo = res.accountInfo;
					const result = res.data || [];
					this.page == 1 ? (this.pageData = result) : (this.pageData = [...this.pageData, ...result]);
					if (result.length < this.limit) this.getMore = false;
				});
		}
	},
	onReachBottom() {
		if (!this.getMore) return;
		this.page++;
		this.getAddGreenFenLog();
	}
};
</script>

<style>
page {
	background-color: #f2f2f2;
	padding-bottom: 24rpx;
}
</style>
<style lang="scss" scoped>
.list {
	width: 690rpx;
	margin: 24rpx auto 0;
	background-color: #fff;
	border-radius: 10rpx;
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.privce {
		font-size: 52rpx;
		font-weight: 500;
		color: #009933;
	}
}
.Wrapper {
	width: 100%;
	padding: 24rpx 40rpx 30rpx 40rpx;
	background-color: #000066;
	color: #fff;

	.Btn {
		color: #fff;
		font-size: 28rpx;
		padding: 0 20rpx;
		position: relative;
	}
	.btnLine:before {
		content: '';
		width: 1px;
		height: 20rpx;
		background-color: #fff;
		position: absolute;
		right: 0;
		top: 10rpx;
	}
	.foundation {
		display: flex;
		flex-direction: column;
	}
	.infoTxt {
		color: #fff;
		font-size: 26rpx;
		margin-top: 20rpx;
	}
}
</style>
